<!-- pages/components/map/map.vue -->
<template>
	<view class="container">
		<view class="header"><text>学号：2531010120144  姓名：韦梦丹</text></view>
		    <!-- 校园Logo -->
		<view class="logo-container">
		  <image 
			src="/static/logo-container.jpg"  <!-- 校徽图片需放入static目录 -->
			mode="aspectFit"
			class="school-logo"
		  ></image>
		</view>

		<!-- 校园风光 -->
		<view class="scenery-container">
		  <image 
			src="/static/school-scenery.jpg"  <!-- 风景图需放入static目录 -->
			mode="widthFix"
			class="school-scenery"
		  ></image>
		</view>
	</view>

	<view class="wrapper">
		<view class="title">地图演示 (广西农职大)</view>
		<map
			class="my-map"
			:longitude="longitude"
			:latitude="latitude"
			:markers="markers"
		>
		</map>
	</view>
</template>

<script setup>
import { ref } from 'vue';

// 1. 定义中心点坐标 (广西农业职业技术大学)
const longitude = ref(108.24);
const latitude = ref(22.84);

// 2. 定义标记点
const markers = ref([
	{
		id: 1, // 必须有
		longitude: 108.24,
		latitude: 22.84,
		title: '广西农职大', // 点击后显示
		iconPath: '/static/logo.png', // 用我们的 logo 当图标
		width: 30,
		height: 30
	}
]);

// 3. (可选) 一个小方法，演示数据驱动

</script>

<style>
.container {
	  padding: 20rpx;
	}
.logo-container {
  background-color: #fff;
  padding: 30rpx;
  display: flex;
  justify-content: center;
  margin-bottom: 20rpx;
}

.school-logo {
  width: 200rpx;
  height: 200rpx;
}

.scenery-container {
  background-color: #fff;
  padding: 15rpx;
  margin-bottom: 20rpx;
}

.school-scenery {
  width: 100%;  /* 宽度100%配合widthFix模式 */
}
.wrapper {
	padding: 15px;
}
.title {
	font-size: 16px;
	font-weight: bold;
	padding: 10px 0;
}
.box {
	padding: 10px;
	background-color: #f4f4f4;
	border-radius: 5px;
	margin-bottom: 10px;
}
.my-map {
	width: 100%;
	height: 300px;
}
</style>